<!DOCTYPE html>
<html>

<head>
	<title> </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<style>
		body {
			font-family: '仿宋_GB2312';
			color: black;
		}

		.divtablemain {
			position: relative;
			page-break-after: always;
			width: 210mm;
			min-height: 297mm;
			color: black;
		}

		.tablemain {
			width: 200mm;
			border-collapse: collapse;
		}

		.tablemain td {
			font-size: 13pt;
			line-height: 6mm;
			height: 12mm;
			text-align: center;
			border: 1px solid black;
		}

		.tablemain3 {
			width: 200mm;
			border-collapse: collapse;
		}

		.tablemain3 td {
			font-size: 16pt;
			line-height: 10mm;
			height: 18mm;
			text-align: center;
			border: 1px solid black;
		}

		.tablemain4 {
			width: 200mm;
			border-collapse: collapse;
		}

		.tablemain4 td {
			font-size: 16pt;
			line-height: 10mm;
			height: 130mm;
			text-align: center;
			border: 1px solid black;
		}

		.tablefont {
			font-size: 14pt;
		}

		.tableleft {
			text-align: left !important;
			padding-left: 2mm;
		}

		.tddivimg {
			width: 100%;
			text-align: center;
		}

		.tdimg {
			max-width: 90%;
			max-height: 130mm;
			cursor: pointer;

		}

		.imgperson {
			height: auto;
			width: 160px;
			margin: 5px;
			cursor: pointer;
		}

		.tdborder-none {
			border: none !important;
		}

		.spanrst {
			font-size: 20px;
		}

		.signimg {
			margin-top: 5px;
			width: 100px;
			border: 0;
		}

		.div-border {
			margin-top: 8mm;
			width: 180mm;
			padding: 2px;
			border: 2px solid black;
		}


		.footerbold {
			font-family: 楷体_GB2312;
			text-align: left;
			font-size: 10.5pt;
			font-weight: bold;
			line-height: 20px;
		}

		.spanblod {
			font-weight: bold;
		}

		.tdtitle {
			min-width: 10mm !important;
			width: 10mm !important;
			font-size: 14pt !important;
		}

		.div-no {
			position: absolute;
			right: 10mm;
			font-family: 微软雅黑;
			font-size: 14pt;
		}

		.imgsign {
			z-index: 999;
			width: 48mm;
			position: absolute;
			bottom: 30mm;
			right: 16mm;
		}

		.tabletitle {
			font-family: 方正小标宋简体;
			font-size: 24pt;
			padding: 5mm 0px 5mm;
		}

		.tdleftcol2 {
			text-align: left !important;
			padding-left: 2mm;
		}

		.tableremark {
			font-family: 楷体;
			font-size: 14pt !important;
			padding-left: 10mm;
			line-height: 7mm !important;
		}

		.divtablemainh { 
			position: relative;
			page-break-after: always;
			width: 297mm;
			min-height: 200mm;
			/* transform: rotate(90deg); */
			/* -ms-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform-origin: 50% 50%;
			color: black; */
		}

		.tablemainh {
			width: 297mm;
			border-collapse: collapse;
		}

		.tablemainh td {
			font-size: 13pt;
			line-height: 6mm;
			height: 10mm;
			text-align: center;
			border: 1px solid black;
		}

		.div-xiangzhen {
			width: 15%;
			float: left;
		}

		.div-shequ {
			width: 15%;
			float: left;
		}

		.div-address {
			width: 40%;
			float: left;
		}

		.div-phone {
			width: 30%;
			float: left;
		}
	</style>
	<style type="text/css" media="print">
		@page {
			size: landscape;
		}

		.footerbold {
			-webkit-print-color-adjust: exact;
			font-family: 楷体_GB2312;
			text-align: left;
			font-weight: bolder;
			font-size: 10.5pt;
			color: #000000;
			line-height: 20px;
			
			
		}
	</style>

</head>

<body>
	 
	<div id="app">
		<center>
			<div class="divtablemainh">
				<div class="tabletitle">城乡低保家庭入户核查明细表（一）</div>
				<div style="height: 10mm;line-height: 10mm;">
					<div class="div-xiangzhen">乡镇：{{dbinfo.Town}}</div>
					<div class="div-shequ">社区：{{dbinfo.Community}}</div>
					<div class="div-address">详细住址：{{dbinfo.Address}}</div>
					<div class="div-phone">联系方式：{{dbinfo.Phone}}</div>
				</div>
				<table border="1" cellspacing="0" cellpadding="0" class="tablemainh">
					<tr>
						<td style="width: 20mm;" rowspan="2">
							<div>户主</div>
							<div>姓名</div>

						</td>
						<td rowspan="2">{{dbinfo.Name}}{{dbperson.IsNew==1?"（新）":""}}</td>

						<td rowspan="2">
							<div>家庭</div>
							<div>人口</div>
						</td>
						<td rowspan="2">{{dbinfo.FamilyCount}}</td>
						<td rowspan="2" style="width: 20mm;">
							<div>是否</div>
							<div>建档</div>
							<div>立卡</div>

						</td>
						<td rowspan="2" style="width: 20mm;">{{dbinfo.IsRecord==1?"是":"否"}}</td>
						<td>残疾类型</td>
						<td colspan="3">
							<span> 精神{{dbinfo.HandicapType==1?"☑":"□"}} </span>
							<span> 智力{{dbinfo.HandicapType==2?"☑":"□"}}</span>
							<span> 言语{{dbinfo.HandicapType==3?"☑":"□"}}</span>
							<span> 肢体{{dbinfo.HandicapType==4?"☑":"□"}}</span>
							<span> 视力{{dbinfo.HandicapType==5?"☑":"□"}}</span>
							<span> 其他{{dbinfo.HandicapType==9?"☑":"□"}}</span>

						</td>
						<td>
							<span v-if="dbinfo.HandicapType>0">{{dbinfo.HandicapLevel}}级</span>
						</td>
					</tr>
					<tr>
						<td>其他健康状况</td>
						<td colspan="4">{{dbinfo.Condition}}</td>
					</tr>
					<tr>
						<td :rowspan="6">
							<div>家庭成</div>
							<div>员信息</div>
						</td>
						<td>姓名</td>
						<td>
							<div>与户主</div>
							<div>关系</div>


						</td>
						<td>
							<div>是否为</div>
							<div>保障对象</div>

						</td>
						<td>年龄</td>
						<td colspan="2">身份证号</td>
						<td>健康状况</td>
						<td>职业状况</td>
						<td>职业明细</td>
						<td>
							年收入
							<br />（元）
						</td>
					</tr>
					<tr :key="item.Gid" v-for="item in family0">
						<td>{{item.Name}}</td>
						<td>{{item.Relation}}</td>
						<td>{{item.IsBaozhang==1?"是":"否"}}</td>
						<td>{{item.Age}}</td>
						<td colspan="2">{{item.IdCardNo}}</td>
						<td>{{item.HealthDesc}}</td>
						<td>{{item.JobDesc}}</td>
						<td>{{item.JobDetail}}</td>
						<td>{{item.InCome}}</td>
					</tr>
					<tr v-for="item in (5-family0.length)">
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td colspan="2"> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
					</tr>

					<tr v-if="family1.length==0">
						<td :rowspan="6">
							<div>赡抚</div>
							<div>（扶）养</div>
							<div>义务人</div>
							<div>信息</div>

						</td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td colspan="2"> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
					</tr>
					<tr v-else :key="item.Gid" v-for="(item,index) in family1">
						<td v-if="index==0" :rowspan="6">
							<div>赡抚</div>
							<div>（扶）养</div>
							<div>义务人</div>
							<div>信息</div>

						</td>
						<td>{{item.Name}}</td>
						<td>{{item.Relation}}</td>
						<td>{{item.IsBaozhang==1?"是":"否"}}</td>
						<td>{{item.Age}}</td>
						<td colspan="2">{{item.IdCardNo}}</td>
						<td>{{item.HealthDesc}}</td>
						<td>{{item.JobDesc}}</td>
						<td>{{item.JobDetail}}</td>
						<td>{{item.InCome}}</td>
					</tr>

					<tr v-for="item in (5-family1.length)">
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td colspan="2"> </td>
						<td> </td>
						<td> </td>
						<td> </td>
						<td> </td>
					</tr>
				</table>
				<div class="tableremark tableleft"> &nbsp;
					&nbsp;注：法定赡养人是指晚辈亲属对长辈亲属的照顾义务的个人；抚养人是指长辈对晚辈亲属的照顾义务的个人；扶养义务人是指同辈亲属之间的供养义务的个人，比如夫妻、姊妹等。</div>

			</div>
		</center>

	</div>
	<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
	<script language="javascript" type="text/javascript">
		var app = new Vue({
			el: '#app',
			mounted: function () {

			},
			data: {
				type: 1,
				dbperson: {
				},
				dbinfo: {
					familyperson: [

					],
					dbimg: [
					],
					dbincome: [

					]
				}
			},
			computed: {

			},
			methods: {
				getNo(grouptown, num) {
					return grouptown + (Array(3).join(0) + num).slice(-3) + "号";
				},
			},
			computed: {
				family0() {
					return this.dbinfo.familyperson.filter(x => x.Type == 0);
				},
				family1() {
					return this.dbinfo.familyperson.filter(x => x.Type == 1);
				},
				income0() {
					return this.dbinfo.dbincome.filter(x => x.Type == 0);
				},
				income1() {
					return this.dbinfo.dbincome.filter(x => x.Type == 1);
				},
				imgzhengming() {
					return this.dbinfo.dbimg.filter(x => x.Type == 0);
				},
				imgzhengmingOther: function () {
					let index = 1;
					let count = 2;
					let arrTemp = [];
					if (this.imgzhengming.length > 1) {
						for (let i = 1; i < this.imgzhengming.length; i++) {
							index = parseInt(i / count);
							if (arrTemp.length <= index) {
								arrTemp.push([]);
							}
							arrTemp[index].push(this.imgzhengming[i])
						}
					}

					return arrTemp
				},
				imgshenfenzheng() {
					return this.dbinfo.dbimg.filter(x => x.Type == 1);
				},
				imgshenfenzhengOther() {
					let index = 0;
					let count = 2;
					let arrTemp = [];

					for (let i = 0; i < this.imgshenfenzheng.length; i++) {
						index = parseInt(i / count);
						if (arrTemp.length <= index) {
							arrTemp.push([]);
						}
						arrTemp[index].push(this.imgshenfenzheng[i])
					}
					return arrTemp
				},
				imgruhu() {
					return this.dbinfo.dbimg.filter(x => x.Type == 2 || x.Type == 3);
				},
				imgimgruhuOther() {
					let index = 0;
					let count = 2;
					let arrTemp = [];

					for (let i = 0; i < this.imgruhu.length; i++) {
						index = parseInt(i / count);
						if (arrTemp.length <= index) {
							arrTemp.push([]);
						}
						arrTemp[index].push(this.imgruhu[i])
					}
					return arrTemp
				},
				// imgremark() {
				// 	return this.dbinfo.dbimg.filter(x => x.Type == 3);
				// },

				video() {
					return this.dbinfo.dbimg.filter(x => x.Type == 9);
				}
			},
		});

		function printData(dbperson, dbinfo) {
			app.dbperson = dbperson;
			app.dbinfo = dbinfo;

			setTimeout(function () {
				window.print();
			}, 500);

		}
	</script>

</body>

</html>